<template>
  <div>
    <div class="flow-history-div" v-for="value in flowCommentHistory">
      <Row>
        <Col :span="2">
          <Col :span="2">
            <Avatar size="large" style="backgroundColor:#87d068" icon="user"/>
          </Col>
        </Col>
        <Col :span="22">
          <Row type="flex" justify="space-around">
            <Col :span="3" style="color: #00a0e9">{{value.username}} ：</Col>
            <Col :span="13"></Col>
            <Col :span="2" style="font-weight: bold;">{{value.commentTypeName}}</Col>
            <Col :span="4">{{value.createTime}}</Col>
          </Row>
          <Row type="flex" justify="space-around">
            <Col :span="2"></Col>
            <Col :span="21">{{value.message}}</Col>
            <Col :span="1"></Col>
          </Row>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
  import {Row, Col, Avatar} from "ant-design-vue";

  export default {
    name: "FlowHistoryDispose",
    components: {
      Row,
      Col,
      Avatar
    },
    data() {
      return {}
    },
    props: {
      flowCommentHistory: {
        type: Array,
        default: () => []
      }
    },
    methods: {}
  }
</script>

<style scoped>

  .flow-history-div {
    margin: 10px;
    padding: 10px;
    background: #f3f5f7;
    border-radius: 8px;
  }

  .flow-history-div {
    margin: 10px;
    padding: 10px;
    background: #f3f5f7;
    border-radius: 8px;
  }
</style>
